const path=require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    entry:'./src/main.js',
    output:{
        filename:'./src/bundle.[hash:8].js',
        path:path.join(__dirname,'dist')
    },
    optimization:{
        minimizer:[
            new OptimizeCssAssetsWebpackPlugin(),
        ]
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                test:/.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            {
                test:/\.(png|jpg)$/,
                use:{
                    loader:'file-loader',
                    options:{
                        name:'[name].[hash:8].[ext]',
                        outputPath: './src/img',
                        publicPath: '../src/img',
                        esModule: false
                    }
                }
            },
            {
                test: /\.vue$/,
                use: 'vue-loader' // +++
            },
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
                enforce: 'pre',
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            }
        ]
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin(
            {
                template:path.join(__dirname, 'index.ejs'),
                title:'webpack-vue',
                BASE_URL:'./',
                }
        ),
        new MiniCssExtractPlugin({
            filename: './src/css/[name].[hash:8].css',
        }),
        
    ],
}